<template>
    <breadCrumb></breadCrumb>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="username" label="登入账户" width="180" />
        <el-table-column prop="iped" label="上次登入vip" width="180" />
        <el-table-column prop="timed" label="上次登入时间" sortable/>
        <el-table-column prop="ip" label="本次登入vip" />
        <el-table-column prop="time" label="本次登入时间" />
    </el-table>
</template>
<script setup>
import { onMounted,ref } from 'vue';
import * as api from "@/api/users.js"

// 引入pinia
import  {useUser} from "../../../store/users" 


import {storeToRefs} from "pinia"


let userLogin =useUser()

// 响应数据
let {loginLog} =storeToRefs(userLogin)

let tableData =ref([])
onMounted(async()=>{
    // 获取本地token
    let token =sessionStorage.getItem('whc-token')
    let res = await api.getLoginLog(token)
    // console.log(res)
    
    userLogin.$patch((state)=>{
        state.loginLog=res.data.data
      
        
    })
    console.log(loginLog.value[0]);
    loginLog.value.forEach(item=>{
        // 重新获取数据 
        let obj = {
            username:item.username,
            iped:item.lastLogin.ip,
            timed:item.lastLogin.loginTime,
            ip:item.nowLogin.ip,
            time:item.nowLogin.loginTime
            
        }
        // 
        tableData.value.push(obj)
    })

})






</script>
<script>
export default {
    meta:{
        title: 'glsy',
        name: '管理首页',
        routeName:"welcome",
        icon:"icon-yonghu"
    }
}


</script>

<style scoped>


</style>